<template name="caseDetail">
	<!-- 方案详情列表 -->
	<view class="caseDetail">
		<view class="bg_border" :class="status == 2?'fail_bg':''">
			<view class="top" :style="{top:top + 'px'}">
				<view class="top-info flex">
					<image src="/static/common/head-portrait.png"></image>
					<text class="name">喜迎大奖</text>
					<view class="reward flex" @click="fnShowMoadl(index,item)" v-for="(item,index) in rewardLogo" :key="index">
						<image :src="item.src"></image>
						<text>×{{item.num}}</text>
					</view>
		
				</view>
				<view class="bot-info flex-c">
					<view class="flex-col-ac">
						<view><text class="num">157</text></view>
						<text>中奖次数</text>
					</view>
					<view class="flex-col-ac">
						<view><text class="num">157</text></view>
						<text>带红人数</text>
					</view>
					<view class="flex-col-ac">
						<view><text style="color: #333;">￥</text><text class="num">254892</text></view>
						<text>累计中奖</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="holder1"></view> -->
		<view class="buy-info">
			<view class="info-top flex-bc">
				<view class="flex-c buy-content">
					<image src="/static/common/head-portrait.png"></image>
					<text class="typename">双色球</text>
					<view class="tags"><text>全额保底</text></view>
					<view class="tags"><text>已出票</text></view>
				</view>
				<text class="buy-status" v-if="!status">认购中</text>
				<view class="hasWin flex-c" v-if="status" :class="status == 2?'hasFail':''">
					<text v-if="status == 1">￥4.280.00</text>
					<text v-else-if="status == 2">未中奖</text>
				</view>
			</view>
			<view class="info-bot">
				<view class="texts"><text class="symbol">“</text><text>这单双色球，有请中一等奖彩友倾情出号全力冲击一等奖，年末大放送欢迎各位老铁一路跟上，好运中大奖</text></view>
				<view class="flex-bc price">
					<view class="flex-c">
						<view class="p-item">
							<text>￥</text><text class="unitPrice">20</text>
						</view>
						<text>/份</text>
					</view>
					<view class="flex-c">
						<text>方案总额：</text>
						<view class="p-item">
							<text>￥</text><text class="allPrice">17920</text>
						</view>
					</view>
				</view>
				<view class="progress-bar">
					<text class="allCount">共1168份</text>
					<text class="hasBuy">已购833份</text>
					<view class="progress-inner"></view>
				</view>
			</view>
		</view>
		<view class="buyBox flex-c" :class="isFixed?'fixed':''" :style="{top:top-5 + 'px'}">
			<view class="flex-c" @click="handlerClick(index)" v-for="(item,index) in buyInfo" :key="index" :class="currentIndex == index?'active':''">
				<text class="see">{{item.title}}</text>
				<text>{{item.content}}</text>
			</view>
			<!-- <view class="flex-c active" @click="handlerClick(1)">
				<text class="see">157</text>
				<text>认购人数</text>
			</view>
			<view class="flex-c" @click="handlerClick(2)">
				<text class="see">￥254892</text>
				<text>30天中奖</text>
			</view> -->
		</view>
		<view class="notice flex" v-if="status == 1">
			<text>一单爆红带领大家中奖啦！总佣金：</text><text style="color: #F22F29;font-size: 36rpx;">￥{{allMoeny}}</text>
		</view>
		<view class="buyList" v-if="currentIndex == 1">
			<view class="list-top flex-c">
				<text>彩民</text>
				<text>认购份数</text>
				<text>认购金额(元)</text>
			</view>
			<view class="lists">
				<view class="listItem flex-c" @click="fnToWinningStatus(1)">
					<view class="flex-row-ac userinfo">
						<view class="avatar_bg flex-c">
							<image src="/static/common/head-portrait.png"></image>
						</view>
						<view class="lanch">
							<text>喜迎大奖</text>
							<view class="lanchPepole">
								<text>发单人</text>
							</view>
						</view>
					</view>
					<view class="userinfo flex-c">
						<text>448份/50.00%</text>
					</view>
					<view class="userinfo flex-c">
						<text class="money">8969.00</text>
					</view>
				</view>
		
				<view class="listItem flex-c" @click="fnToWinningStatus(0)">
					<view class="flex-row-ac userinfo">
						<view class="avatar_bg flex-c">
							<image src="/static/common/head-portrait.png"></image>
							<image src="/static/common/one.png" class="level"></image>
						</view>
						<view class="lanch">
							<text>喜迎大奖</text>
							<!-- <view class="lanchPepole">
								<text>发单人</text>
							</view> -->
						</view>
					</view>
					<view class="userinfo flex-c">
						<text>448份/50.00%</text>
					</view>
					<view class="userinfo flex-c">
						<text class="money">8969.00</text>
					</view>
				</view>
				<view class="listItem flex-c">
					<view class="flex-row-ac userinfo">
						<view class="avatar_bg flex-c">
							<image src="../../static/common/head-portrait.png"></image>
							<image src="../../static/common/two.png" class="level"></image>
						</view>
						<view class="lanch">
							<text>喜迎大奖</text>
							<!-- <view class="lanchPepole">
								<text>发单人</text>
							</view> -->
						</view>
					</view>
					<view class="userinfo flex-c">
						<text>448份/50.00%</text>
					</view>
					<view class="userinfo flex-c">
						<text class="money">8969.00</text>
					</view>
				</view>
				<view class="listItem flex-c">
					<view class="flex-row-ac userinfo">
						<view class="avatar_bg flex-c">
							<image src="../../static/common/head-portrait.png"></image>
							<image src="../../static/common/three.png" class="level"></image>
						</view>
						<view class="lanch">
							<text>喜迎大奖</text>
							<!-- <view class="lanchPepole">
								<text>发单人</text>
							</view> -->
						</view>
					</view>
					<view class="userinfo flex-c">
						<text>448份/50.00%</text>
					</view>
					<view class="userinfo flex-c">
						<text class="money">8969.00</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="footholder">
		
		</view>
		<view class="footer flex-c">
			<view class="shareBtn flex-c">
				<text>分享</text>
			</view>
			<view class="buyBtn flex-c">
				<text>立即认购</text>
				<text class="time">1天04:29:50</text>
			</view>
		</view>
		<uni-popup ref="popupShow" type="center">
			<view class="bg_img" :class="reward.index == 1?'twoBg':''">
				<view class="innerBox flex-col-ac">
					<view class="innerTop" style="color: #333;margin-bottom: 10rpx;">
						<text>{{reward.type}}</text>
						<text>{{reward.time}}</text>
					</view>
					<view class=" innerBot">
						<text v-if="reward.index == 0">一等奖</text>
						<text v-else-if="reward.index == 1">二等奖</text>
						<text style="color: #F22F29;">{{reward.num}}</text>
						<text>注，奖金</text>
						<text style="color: #F22F29;">{{reward.rewards}}</text>
						<text>万</text>
					</view>
				</view>
		
			</view>
			<image class="close" src="../../static/common/close.png" @click="fnCloseModal()"></image>
		</uni-popup>
	</view>
</template>

<script>
	const util = require('../../common/util.js')
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: "caseDetail",
		components: {
			uniPopup
		},
		props:['status'],
		data() {
			return {
				top: 0,
				height1: 0,
				height2:0,
				currentIndex: 1,
				index: 1,
				isFixed: false,
				rewardLogo: [{
					src: '../../static/common/szc.png',
					num: 5,
					rewards: '5',
					type: '大乐透',
					time: '2020107期'
				}, {
					src: '../../static/common/szc1.png',
					num: 12,
					rewards: '30.59',
					type: '大乐透',
					time: '20210203期'
				}],
				reward: {
					index: 0,
					num: 0,
					rewards: 0,
					type: '',
					time: ''
				},
				buyInfo: [{
						title: '认购可见',
						content: '方案内容'
					},
					{
						title: '157',
						content: '认购人数'
					},
					{
						title: '￥24567',
						content: '30天中奖'
					}
				],
				allMoeny:267.75

			};
		},
		mounted() {
			let that = this
			let height1,height2
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".bg_border"); // 获取某个元素
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height1 = data.height
					}).exec()
				}
			});
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".buy-info"); // 获取某个元素
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height2 = data.height
					}).exec()
				}
			});
		},
		methods: {
			fnGoBack() {
				uni.navigateBack()
			},
			fnShowMoadl(index, item) {
				this.$refs.popupShow.open()
				this.reward.index = index
				this.reward.num = item.num
				this.reward.rewards = item.rewards
				this.reward.type = item.type
				this.reward.time = item.time
			},
			fnCloseModal() {
				this.$refs.popupShow.close()
			},
			handlerClick(index) {
				if (this.currentIndex == index) return
				this.currentIndex = index
			},
			fnToWinningStatus(index){
				var url = '/pages/winning-status/win'
				if(!index){
					url = '/pages/winning-status/fail'
				}
				uni.navigateTo({
					url:url
				})
			}
		},
		created() {
			console.log(this.status)
		},
		onPageScroll: util.$api.debounce(function(e) {
			let scrollTop = e.scrollTop
			console.log(this.height1+this.height2)
			if (scrollTop >= this.height1+this.height2) {
				this.isFixed = true
				// #ifdef H5
				this.top = 44
				// #endif
				// #ifdef APP-PLUS
				this.top = 0
				// #endif
			}else{
				this.isFixed = false
			}
		}, 5),

	}
</script>

<style lang="scss" scoped>
	.close {
		width: 73rpx;
		height: 73rpx;
		margin: 40rpx auto;
		display: block;
	}

	.twoBg {
		background: url(../../static/common/two-bg.png)no-repeat center/100% !important;
	}

	.bg_img {
		width: 574rpx;
		height: 702rpx;
		background: url(../../static/common/one-bg.png)no-repeat center/100%;
		position: relative;

		.innerBox {
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 36rpx;
			color: #666;
			width: 100%;
		}
	}
	.notice{
		width: 100%;
		height: 80rpx;
		background: #FFEBE5;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		align-items: center;
		color: #333;
	}
	// .z_index {
	// 	z-index: 99;
	// 	/*  #ifdef  H5  */
	// 	height: 100rpx !important;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx !important;
	// 	/*  #endif  */
	// }

	// .header {
	// 	width: 100%;
	// 	/*  #ifdef  H5  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 200rpx;
	// 	/*  #endif  */
	// 	background: #F22F29;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;

	// 	.status-bar {
	// 		height: var(--status-bar-height);
	// 	}

	// 	.title {
	// 		font-size: 36rpx;
	// 		color: #fff;
	// 		height: 100rpx;

	// 		view {
	// 			flex: 1;
	// 			padding: 0 20rpx;
	// 		}

	// 		.share {
	// 			justify-content: flex-end;

	// 			image {
	// 				width: 50rpx;
	// 				height: 50rpx;
	// 				display: block;
	// 				margin-right: 20rpx;
	// 			}
	// 		}
	// 	}
	// }

	// .holder {
	// 	/*  #ifdef  H5  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 200rpx;
	// 	/*  #endif  */
	// }
	.fail_bg{
		background: #9BA7B7 !important;
	}
	.bg_border{
		width: 100%;
		background: #F22F29;
		.top {
			width: 100%;
			height: 256rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			// position: absolute;
			top: 100rpx;
			left: 0;
			padding: 32rpx 20rpx;
			box-sizing: border-box;
		
			.top-info {
				align-items: center;
		
				image {
					width: 88rpx;
					height: 88rpx;
				}
		
				.reward {
					align-items: flex-end;
					font-size: 28rpx;
					color: #666;
		
					image {
						width: 70rpx;
						height: 70rpx;
					}
		
					text {
						margin: 0 10rpx 6rpx;
					}
				}
		
				.name {
					font-size: 28rpx;
					color: #333;
					margin: 0 26rpx;
				}
			}
		
			.bot-info {
				margin-top: 20rpx;
		
				view {
					flex: 1;
					font-size: 24rpx;
					color: #666;
		
					.num {
						font-size: 36rpx;
						color: #333;
					}
				}
			}
		}
	}
	

	.buy-info {
		margin: 8rpx 0;
		background: #fff;

		.info-top {
			height: 104rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EDF4F9;
			padding: 32rpx 20rpx;

			.buy-content {
				font-size: 32rpx;
				color: #333;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}

				.tags {
					font-size: 20rpx;
					background: rgba(242, 47, 41, 0.2);
					border-radius: 20rpx;
					padding: 4rpx 12rpx;
					color: #F22F29;
					margin-right: 10rpx;
				}

				.typename {
					margin: 0 10rpx;
				}
			}

			.buy-status {
				font-size: 24rpx;
				color: #F22F29;
			}
			.hasWin{
				width: 140rpx;
				height: 140rpx;
				background: url(../../static/common/zhang.png)no-repeat center/100%;
				transform: rotate(-15deg);
				font-size: 26rpx;
				color: #fff;
			}
			.hasFail{
				background: url(../../static/common/not-winning.png)no-repeat center/100% !important;
			}
		}

		.info-bot {
			padding: 32rpx 20rpx;
			background: #fff;
			font-size: 30rpx;
			color: #333;

			.price {
				margin: 20rpx 0;
				font-size: 24rpx;
				color: #999;

				.p-item {
					color: #F22F29;

					.unitPrice,
					.allPrice {
						font-size: 36rpx;
						font-weight: 500;
					}
				}
			}

			.progress-bar {
				height: 36rpx;
				background: rgba(242, 47, 41, 0.2);
				border-radius: 20rpx;
				position: relative;
				color: #fff;
				font-size: 22rpx;

				text {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					z-index: 98;
					display: block;

				}

				.allCount {
					right: 20rpx;
				}

				.hasBuy {
					left: 20rpx;
				}

				.progress-inner {
					position: absolute;
					height: 100%;
					top: 0;
					left: 0;
					border-radius: 20rpx;
					width: 37%;
					background: #F22F29;
				}
			}

			.texts {
				.symbol {
					color: #999;
					font-size: 36rpx;
				}
			}
		}
	}

	.fixed {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 200;
	}

	.buyBox {
		height: 128rpx;
		background: #fff;

		view {
			flex: 1;
			font-size: 24rpx;
			color: #666;
			height: 100%;
			flex-direction: column;
		}

		.active {
			border-bottom: 4rpx solid #F22F29;
			color: #F22F29 !important;
		}

		.see {
			font-size: 30rpx;
		}

		// .see,.number,.buy-price{
		// 	color: #333;
		// }
		// .number,.buy-price{
		// 	font-size: 36rpx;
		// }
	}

	.buyList {
		.list-top {
			height: 68rpx;
			background: #EDF4F9;
			font-size: 24rpx;
			color: #666;

			text {
				flex: 1;
				text-align: center;
			}
		}

		.lists {
			.listItem:nth-child(even) {
				background: #FAFDFF;
			}

			.listItem {
				height: 114rpx;
				background: #fff;
				padding: 0 32rpx;

				.userinfo {
					flex: 1;
					font-size: 24rpx;
					color: #666;

					.avatar_bg {
						border: 4rpx solid #F22F29;
						border-radius: 50%;
						margin-right: 10rpx;
						position: relative;
						image {
							width: 68rpx;
							height: 68rpx;
							display: block;
						}
						.level{
							width: 104rpx;
							height: 23rpx;
							position: absolute;
							display: block;
							bottom: -6rpx;
						}
					}

					.money {
						font-size: 32rpx;
						color: #F22F29;
					}

					.lanch {
						.lanchPepole {
							padding: 0rpx 10rpx;
							background: #FC6655;
							border-radius: 18rpx;
							color: #fff;
							font-size: 20rpx;
							margin-top: 6rpx;
						}
					}

				}

			}
		}
	}

	.footholder {
		width: 100%;
		height: 104rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 104rpx;
		width: 100%;
		background: #fff;
		font-size: 32rpx;
		color: #333;

		.shareBtn {
			width: 300rpx;
		}

		.buyBtn {
			flex: 1;
			background: #F22F29;
			color: #fff;
			height: 100%;

			.time {
				font-size: 24rpx;
				margin-left: 16rpx;
			}
		}
	}
</style>
